<template>
  <a-carousel
    class="carousel"
    :auto-play="true"
    :move-speed="1000"
    animation-name="fade"
    show-arrow="never"
  >
    <a-carousel-item v-for="image in images">
      <img
        :src="image"
        :style="{
          width: '100%',
          height: '310px'
        }"
      />
    </a-carousel-item>
  </a-carousel>
</template>

<script>
export default {
  setup() {
    const images = [
      'http://127.0.0.1:9000/oj-files/banner1.png',
      'http://127.0.0.1:9000/oj-files/banner2.png',
      'http://127.0.0.1:9000/oj-files/banner3.png'
    ];
    return {
      images
    };
  }
};
</script>

<style lang="less" scoped>
.carousel {
  width: 100%;
  height: 310px;
}
</style>
